import React, { useCallback, useState } from 'react'

import { useHistory } from 'react-router-dom'

import {
  ClassifyWray
} from './StyledCategory'

export default function Classify(props) {
  let [currentTab, setCurrentTab] = useState(props.from === 'category' ? '热门' : '肉类')
  const { push } = useHistory()

  const handleSwitchTab = useCallback(
    item => {
      return () => {
        setCurrentTab(item)
      }
    },
    [],
  )

  const handleGotoList = useCallback(
    (item) => {
      return () => {
        push({pathname: '/list', state: { title: item }})
      }
    },
    [push],
  )

  return (
    <ClassifyWray
      width="1px 0 0 0"
    >
      <ul>
        {
          Object.keys(props.list).map(item => {
            return (
              <li 
                key={item}
                className={currentTab === item ? 'active' : ''}
                onClick={handleSwitchTab(item)}
              >
                <span>{item}</span>
              </li>
            )
          })
        }
      </ul>
      <ul>
        {
          props.list[currentTab].map((item) => {
            return (
              <li
                key={item}
                onClick={handleGotoList(item)}
              >{item}</li>
            )
          })
        }
      </ul>
    </ClassifyWray>
  )
}
